import React from 'react';
import styled from './index.module.css';
import { GoodItemProps } from './types';
import { Good } from '@/views/types';
export default function GoodItem({ good, goDetailProp, addCartProp }: GoodItemProps) {
    function goDetail(good: Good) {
        goDetailProp(good);
    }
    function addCart(e: React.MouseEvent<HTMLDivElement, MouseEvent>, good: Good) {
        e.stopPropagation();
        e.preventDefault();
        addCartProp(good);
    }
    return (
        <div className={styled.good_item} onClick={() => goDetail(good)}>
            <div className={styled.contaienr}>
                <div className={styled.left}>
                    <img src={'https://' + good.media?.file} alt="2" />
                    <img className={styled.icon} src={'https://' + good.mediaIcon?.file} alt="" />
                </div>
                <div className={styled.center}>
                    <div className={styled.good_item_info_title}>{good.description}</div>
                    <div className={styled.good_item_info_price}>Ends at Apr 15</div>
                    <div className={styled.good_item_info_btn}>
                        {Number(good.price) > 0 ? (
                            <>
                                <span style={{ color: 'red' }}>${good.price}</span>
                                <span
                                    style={{
                                        textDecoration: 'line-through',
                                        marginLeft: '10px',
                                    }}
                                >
                                    {good.oldPrice}
                                </span>
                            </>
                        ) : (
                            <span style={{ color: 'red' }}>${good.oldPrice}</span>
                        )}
                    </div>
                </div>
                <div className={styled.right}>
                    <div className={styled.good_buy_item_info_btn}>Shop Now</div>
                    <div className={styled.addCart} onClick={(e) => addCart(e, good)}>
                        <i className="iconfont">&#xe726;</i>
                    </div>
                </div>
            </div>
        </div>
    );
}
